<template>
  <div id="container" ref="$container"></div>
</template>

<script>
import G6 from "@antv/g6";

var _this, graph;
// 连接点
const linkPoints = {
  top: true,
  bottom: true,
  left: true,
  right: true,
};
export default {
  name: "g6-uml",
  data() {
    return {
      currentSelectNode: null,
      currentSelectCombo: null,
      copyComboData: null,
    };
  },
  created() {
    _this = this;
  },
  mounted() {
      document.addEventListener('keydown',e=>{
          if(e.key == 'c' && e.ctrlKey)
              _this.copyCombo()
          if(e.key == 'v' && e.ctrlKey)
            _this.pasetCombo()
      })
    const data = {
      nodes: [
        {
          id: "node1",
          label: "node1",
          x: 150,
          y: 100,
          type: "rect",
          comboId: "combo",
        },
        {
          id: "node2",
          label: "node2",
          x: 150,
          y: 130,
          type: "rect",
          comboId: "combo",
        },
        {
          id: "node3",
          label: "node1",
          x: 350,
          y: 100,
          type: "rect",
          comboId: "combo2",
        },
        {
          id: "node4",
          label: "node2",
          x: 350,
          y: 130,
          type: "rect",
          comboId: "combo2",
        },
      ],
      combos: [
        {
          id: "combo",
          label: "Combo",
        },
        {
          id: "combo2",
          label: "Combo2",
        },
      ],
    };

    graph = new G6.Graph({
      container: "container",
      width: 800,
      height: 600,
      // translate the graph to align the canvas's center, support by v3.5.1
      //   fitCenter: false,
      autoPaint: true,
      // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
      groupByTypes: false,
      modes: {
        default: [
          "drag-canvas",
          "zoom-canvas",
          "activate-relations",
          "brush-select",
          'create-edge',
          "drag-combo",
        ],
      },
      defaultNode: {
        type: "rect",
        style: {
          stroke: "#FDFDFD",
          lineWidth: 0,
        },
      },
      defaultCombo: {
        type: "rect",
        size: [100, 100],
        style: {
          lineWidth: 1,
          radius: 5,
        },
        labelCfg: {
          position: "top",
          style: {
            fontSize: 18,
          },
        },
      },
      nodeStateStyles:{
          active:{
              lineWidth:1,
              stroke:'#e9eefb',
              shadowBlur:0
          }
      }
      //   comboStateStyles: {
      //     active: {
      //       fill: "#E9FBF6",
      //       stroke: "#D3F6ED",
      //       opacity: 0.5,
      //     },
      //   },
    });

    graph.data(data);
    graph.render();

    graph.on("combo:mouseenter", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", true);
    });
    graph.on("combo:mouseleave", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", false);
    });
    graph.on("combo:click", _this.comboClick);

    graph.on("node:mouseenter", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", true);
    });

    graph.on("node:mouseleave", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", false);
    });
    graph.on("node:click", _this.nodesClick);

    graph.on("edge:mouseenter", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", true);
    });
    graph.on("edge:mouseleave", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "active", false);
    });
    graph.on("edge:click", (evt) => {
      const { item } = evt;
      graph.setItemState(item, "selected", true);
    });

    graph.on("canvas:click", (evt) => {
      graph.getCombos().forEach((combo) => {
        graph.clearItemStates(combo);
      });
    });
  },
  methods: {
    // 节点
    nodesClick(e) {
      if (e.item == _this.currentSelectNode) return;
      graph.setItemState(e.item, "selected", true);
      if (_this.currentSelectNode)
        graph.setItemState(_this.currentSelectNode, "selected", false);
      _this.currentSelectNode = e.item;
    },
    nodesMouseenter(e) {},
    nodesMouseleave(e) {},

    // 组合
    comboClick(e) {
      if (e.item == _this.currentSelectCombo) return;
      graph.setItemState(e.item, "selected", true);
      if (_this.currentSelectCombo)
        graph.setItemState(_this.currentSelectCombo, "selected", false);
      _this.currentSelectCombo = e.item;
    },

    /**
     * 组合复制
     */
    async copyCombo(){
        var { data:comboId } = await $y.api.get('/api/develop/guid')
        _this.copyComboData = graph.getComboChildren(_this.currentSelectCombo.getID()).nodes.map(n=>{return n.getID()})
        _this.copyComboData.push(comboId)
    },
    /**
     * 组合粘贴
     */
    pasetCombo(){
        var { nodes} = _this.copyComboData
        graph.createCombo(comboId, nodes)
    }
  },
};
</script>


<style lang="scss" scoped>
</style>